<template>
  <div class="bg-light">
    <tabsTop tabName="收货地址"></tabsTop>
    <scroll-view @scrolltolower="onReachScollBottom" scroll-y="true" class="address-scroll">
      <!-- 地址列表 -->
      <div v-for="(item, index) in tableData" :key="index" class="address-item">
        <div class="address-card">
          <div class="address-details">
            <div class="name-phone">
              <span class="name">{{ item.Name }}</span>
              <span class="phone">{{ item.Phone }}</span>
            </div>
            <div class="address-info">
              <span class="address">{{ Address(item.Address, item.Address_Details) }}</span>
            </div>
          </div>
          <div @click.stop="handleEdit(item.Address_SerialNumber)" class="edit-icon">
            <uni-icons v-if="item.Address_SerialNumber == customerAddress.Address_SerialNumber" type="star-filled" color="#ffc107" size="20"></uni-icons>
            <uni-icons fontFamily="iconfont" color="#828d96" size="20">{{ '\ue8cf' }}</uni-icons>
          </div>
        </div>
      </div>
    </scroll-view>
    <!-- 底部新增地址 -->
    <div class="add-address-btn" @click="handlAdd">新增地址</div>
  </div>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import { getAddressAllAction } from "@/api/delivery.js";
	export default {
		components: {
			tabsTop, //顶部标题组件
		},
		data() {
			return {
				form:{//查询地址
					page:1,
					limit:10,
					Open_ID:app.globalData.Open_ID,
					App_ID:app.globalData.App_ID,
				},
				total:0,//总数
				isReach:true,//是否没到底
				tableData:[],//地址
				loading: false,//节流
				customerAddress:{}//默认地址
			}
		},
		onShow() {
			//查询默认地址
			this.customerAddress = uni.getStorageSync("customerAddress");
			this.form.page = 1;
			this.getData(this.form)

		},
		computed: {
			Address(){
				return function(str1,str2){
					try{
						return str1.replaceAll('/','') + str2;
					}catch(e){
						return "";
					}
				}
			}
		},
		methods: {
			async getData(data, onReach = false){
				if(!this.loading){
					this.loading = true;
					uni.showLoading({
						title: "加载中...",
					});
					const res = await getAddressAllAction(data);
					if(res.Status=='success'){
						//判断是否重新开始查询
						if(!onReach) {
							this.form.page = 1
							this.tableData = [];
						}
						this.tableData.push(...res.tableData);
						this.total = Number(res.limit);
					}
					uni.hideLoading();
					this.loading = false;
				}
			},
			onReachScollBottom(){//到底刷新数据
				if(this.isReach){//是否有剩余数据
					if (this.tableData.length < this.total) {
						this.form.page++;
						this.getData(this.form,true)
					} else {
						this.isReach = false;
					}
				}
			},
			handlAdd(){
				uni.navigateTo({
					url:'/pages/delivery/addressAdd'
				})
			},
			handleEdit(Address_SerialNumber){
				uni.navigateTo({
					url:'/pages/delivery/addressEdit?Address_SerialNumber='+Address_SerialNumber
				})
			}
		}
	}
</script>


<style scoped>
.bg-light {
  background-color: #f8f9fa;
  padding: 20px;
}

 /* calc(100vh - 200px) */
.address-item {
  margin-bottom: 15px;
}

.address-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.name-phone {
  margin-bottom: 5px;
}

.name {
  font-weight: bold;
  margin-right: 5px;
}

.phone {
  color: #828d96;
}

.edit-icon {
  cursor: pointer;
}

.add-address-btn {
  cursor: pointer;
  text-align: center;
  padding: 12px 24px;
  border-radius: 20px;
  background-color: #28a745;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.add-address-btn:hover {	
  background-color: #218838;
}
	@media screen and (min-width:800px) {
		.address-scroll {
		  height:calc(100vh - 100px);
		}
		}
	@media (max-width: 480px) {
		.address-scroll {
		  height:calc(100vh - 200px);
		}
	}
</style>
